<template>
    <div>
      <div class="page-title">
          <span>知识趣答</span>
          <!-- <el-button type="primary" plain icon="Plus" @click="handleAdd" style="float: right;">新增</el-button> -->
      </div>
      <div class="tip-div" v-if="testStep!=1">
        <p v-if="testStep==2">答题结束，您的成绩为：<span class="score">{{ score*20 }}</span></p>
        <p v-if="testStep==2&&score>0">获得{{ score*2 }}积分</p>
        <el-button type="primary" size="large" icon="Check" @click="startTesting"
          v-if="testStep==0"
          style="background-color:#2a5caa;">开始答题</el-button>
        <el-button type="primary" size="large" icon="Check" @click="startTesting"
          v-if="testStep==2"
          style="background-color:#2a5caa;">再次挑战</el-button>
      </div>
      <div class="quiz-container" v-if="testStep>0">
        <!-- 遍历所有题目 -->
        <div v-for="(question, index) in questions" :key="index" class="question-item">
          <h3>第 {{ index + 1 }} 题：{{ question.content }}</h3>
          <el-radio-group v-model="selectedAnswers[index]">
            <el-radio :label="question.optionA" value="A">
              A、{{ question.optionA }}
            </el-radio>
            <el-radio :label="question.optionA" value="B">
              B、{{ question.optionB }}
            </el-radio>
            <el-radio :label="question.optionA" value="C">
              C、{{ question.optionC }}
            </el-radio>
            <el-radio :label="question.optionA" value="D">
              D、{{ question.optionD }}
            </el-radio>
          </el-radio-group>
          <div class="correct" v-if="testStep==2">
            正确答案：<span>{{ question.correctAns }}</span>
          </div>
        </div>

        <!-- 提交按钮 -->
        <el-button type="primary" @click="submitAnswers" :disabled="isSubmitDisabled"  v-if="testStep==1">
          提交答案
        </el-button>
      </div>
    </div>
  </template>
  
<script setup lang="ts">
  import { ref, reactive, computed, nextTick, toRef } from "vue";
  import baseService from "@/service/baseService";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { timestampToDayHM, timestampToHM, timestampToDate, formatAmount } from "@/utils/utils"
  import { fileUploader } from '@/utils/upload.js'
  import { useRouter, useRoute } from 'vue-router';
  import type { TabsPaneContext } from 'element-plus'
  
  const activeName = ref('zero')
  const router = useRouter();
  const route = useRoute();
  // 查询参数
  const queryForm = reactive({
    deptName: "",
    pageNo: 1,
    tag: '',
    pageSize: 10
  });
  // 列表内容数量
  const total = ref(0);
  // 列表是否加载
  const loading = ref(true);
  const testStep = ref(0);
  const score = ref(0);

  // 问题数据
  const articles = ref<any>([]);

  // 表单实例
  const formRef = ref();
  // 是否打开弹出框
  const open = ref(false);
  const openDetail = ref(false);

  const questions = ref<any>([]);

  // 用户选择的答案
  const selectedAnswers = ref<any>([]);

  // 是否已提交
  const submitted = ref(false);

  // 检查是否所有题目都已作答
  const isSubmitDisabled = computed(() => {
    return selectedAnswers.value.length!=5
  });

  // 提交答案
  const submitAnswers = () => {
    submitted.value = true;
    console.log('用户答案：', selectedAnswers.value);
    let req = {answers: selectedAnswers.value}
    baseService.post("/api/question/finish", req).then((res) => {
      loading.value = false;
      if (res.code === 200) {
        testStep.value = 2
        score.value = res.data
      } else {
        
      }
    })
    .catch(() => {
      loading.value = false;
    });
  };

  // 跳转到资讯详情页面
  const toDetailPage = (pid: number)=>{
    router.push("/course/detail?nid="+pid);
  }

  // 表单验证
  const rules = ref({
    deptName: [{ required: true, message: "规则名称不能为空", trigger: "blur" }],
  });

  const getInfo = () => {
    const cid = route.query.cid
    console.log('从路由获取参数：', route.query)
    let req = {category: cid}
    baseService.post(`/api/question/list`, queryForm).then((res) => {
      console.log('获取列表：',res)
      questions.value = res.data;
      loading.value = false;
    }).catch(() => {
        loading.value = false;
    });
  }

  const startTesting = ()=>{
    testStep.value = 1
    selectedAnswers.value=[]
    getInfo()
  }

</script>
  
  <style scoped>
  .page-title {
    font-size: 16px;
    font-weight: bold;
    color: #0038a7;
    padding-left: 5px;
    border-left: 3px solid #0038a7;
    margin: 15px auto 0 auto;
    height: 30px;
    line-height: 30px;
    width: 920px;
}
.quiz-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.el-radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 20px 0 0 0;
}

.el-radio {
  margin: 10px 0;
}

.el-button {
  margin-top: 20px;
}

.result-item {
  margin-bottom: 20px;
  text-align: left;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.tip-div{
  margin: 15px auto 0 auto;
  width: 920px;
  font-size: 18px;
}
.tip-div p{
  line-height: 40px;
}
.tip-div .score{
  color: #c63c26;
  font-weight: bold;
}
.correct{
  color: #228B22;
  margin-bottom: 20px;
}
  </style>